import React from 'react';
import {
    Outlet,
    NavLink, useLocation
} from "react-router-dom";
function Home(props) {
    // 当路由进行切换时会执行
    const {pathname} = useLocation();
    return (
        <div>
            <h2>Home组件内容</h2>
            <div>
                <ul className="nav nav-tabs">
                    <li className={pathname.toLowerCase()==="/home/news"?"active":""}><NavLink to="/home/news">News</NavLink></li>
                    <li className={pathname.toLowerCase()==="/home/message"?"active":""}><NavLink to="/home/message" >Message</NavLink></li>
                </ul>
                <div>
                   {/* 路由进行占位*/}
                   <Outlet/>
                </div>
            </div>
        </div>
    );
}

export default Home;